<div class="row" style="margin-top:3rem;">
	<div class="profile-upper medium-10 medium-centered large-10 large-centered columns" style="margin-top:2rem;">
		<div class="cover-photo large-12 columns" data-equalizer>
			<div class="cover-left medium-4 large-4 text-center columns"data-equalizer-watch style="background:white;padding:5rem;">
				<div class="medium-10 medium-centered column" style="height:17.5rem;margin-bottom:2rem;margin-top:1rem;">
					<div class="ch-item ch-img-1" style="background: url(<?=$icon?>);background-size:100% 100%;">
			            <div class="ch-info">
			                <h5><a style="color:white;">Change Picture</a></h5>
			                <p>Angela Duncan <a>Last Edited</a></p>
			            </div>
		        	</div>
				</div>
				<h4><strong><?= $group->name ?></strong></h4>
				<div id="myforumrate" data-average="10" data-id="3" style="margin:0 auto;"></div>
				<ul class="text-center" style="margin:0;">
					<li><h4></h4></li>
					<li>Founded 
					<?php 
						$date = new DateTime($group->date_created,new DateTimeZone("Asia/Hong_Kong")); 
						echo $date->format('M d, Y');
					?>
					</li>					
				</ul>				      
			</div>		  
			<div id="cover_photo" class="cover-right medium-8 large-8 columns" data-equalizer-watch style="background:#555555 url(<?=$cover_photo?>);background-size:100% 100%;padding:0;">
				<div class="medium-12 column" style="padding:0;position:relative;height:100%;">
					<div class="medium-6 large-6 column" style="">
						<div class="editcov">
							<i class="fa fa-camera fa-lg"></i>					
							<a class="edit-covtxt">&nbsp;Edit Cover Photo</a>
						</div>	
					</div>	
					<div class="text-right medium-6 large-6 column" style="padding:.5rem 0 0 0;">						
					<?php if(!GroupMembers::checkIfMember($this->session->get('user_id')) && !GroupRequests::checkIfExists($this->session->get('user_id'),$_GET['ghd']) && !GroupOrganizers::checkIfExists($this->session->get('user_id'),$_GET['ghd']))  { ?>				
						<ul class="btngrp button-group">
						  <li class="btnconnnect"><a id="btnJoinUs" href="#" class="tiny button"><i class="fa fa-user fa-lg"></i> Join us</a></li>
						</ul>
					<?php } ?>
					</div>
					<?php if($group->privacy) { ?>
					<div class="text-center privgroup">This is a private group, to see the discussion, post and comment. <a>Join us today</a></div>
					<?php } ?>
				</div>		
			</div>
		</div>
	</div>
</div>

<!-- RESTRICTED RESTRICTED RESTRICTED RESTRICTED-->

<div class="row" style="margin-bottom:2.5rem;">
	<div class="profile-wall medium-10 medium-centered column">
		<div class="profile-left-wall medium-8 column" style="padding:0;">
			<div class="container">	
					<div id="tabs" class="tabs">
						<nav>
							<ul>
							<?php if($user_type !== 'restricted'){ ?> 
								<li><a href="#section-1"><i class="fa fa-pencil"></i><span> Wall</span></a></li>
								<li><a href="#section-2"><i class="fa fa-share"></i><span> Incoming Events</span> <span class="round label">
									<?=Events::countIncomingEvents($_GET['ghd']) ?></span></a></li>
								<li><a href="#section-3"><i class="fa fa-history"></i><span> Past Events</span> <span class="round label"><?=Events::countPastEvents($_GET['ghd']) ?></span></a></li>
								<li><a id="membersTab" href="#section-4"><i class="fa fa-users"></i><span> Members</span> <span class="round label"><?= GroupMembers::find(array(
								array(
									"conditions"=>"group_id = ?0",
									"bind"=>array(0=>$_GET['ghd'])
								)))->count(); ?></span></a></li>
								<?php } ?>
							</ul> 
						</nav>
						<div class="content">
							<section class="medium-12 column" id="section-1" style="padding:0;">
							<?php if($user_type != 'restricted') { ?>
							<?php $this->view->partial('common/group_status'); ?>
							<?php } ?>
							</section>
							<section id="section-2" style="border-radius:.45rem;padding:0rem 0; 1rem 0;">
							<?php $this->view->partial('common/incoming_events');?>
							</section>
							<section id="section-3" style="border-radius:.45rem;padding:0rem 0; 1rem 0;">
							<?php $this->view->partial('common/past_events'); ?>
							</section>
							<section id="section-4" style="background:white;border-radius:.45rem;padding:1.5rem .8rem; 1rem .8rem;">
							<?php $this->view->partial('common/group_members'); ?>
							</section>
						</div><!-- /content -->
					</div><!-- /tabs -->
				</div>	
		</div>

		<div class="profile-right-wall medium-4 column" style="margin-top:3.5rem;">
			<div class="right-bx-contain large-12 column">
				<div class="right-head large-12 column">
					<p>Organizers</p>
				</div>
				<?php foreach ($group_organizers as $value) { ?>
				<div class="right-content large-12 column">
					<div class="user-dp medium-2 large 1 column" style="background:url(<?= IMAGE_URL_SMALL.$value->profile_pic?>);background-size:cover;"></div>
					<div class="userinfo medium-10 large-9 column" style="padding:0;">
					<a target="_blank" href="<?=BASE_URI?>profile?bhd=<?=$value->user_id?>"><?= $value->fname.' '.$value->lname ?></a>
					<p><small><?= ucwords($value->type) ?></small></p>
					</div>					
				</div>
				<?php } ?>
			</div>

			<div class="right-bx-contain large-12 column" style="padding:.7rem;">
				<div class="counter text-center medium-6 column" style="border-right:solid gray 1px;">
					<a><strong>
						<?= Events::find(array(
							"conditions"=>"group_id = ?0",
							"bind"=>array(0=>$_GET['ghd'])
						))->count()?>
					</strong></a> 
					<h4>events</h4>
				</div>
				<div class="counter text-center medium-6 column">
					<a><strong><?= GroupMembers::find(array(
								array(
									"conditions"=>"group_id = ?0",
									"bind"=>array(0=>$_GET['ghd'])
								)))->count(); ?></strong></a> 
					<h4>members</h4>					
				</div>
			</div>

			<?php if($user_type == 'admin') { ?>
			<div class="right-bx-contain large-12 column">
				<div class="right-head large-12 column">
					<p>Membership Request</p>
				</div>
				<div id="requestContainer">
				<?php foreach ($group_requests as $value) { ?>
					<div class="right-content large-12 column">
						<div class="user-dp medium-2 large 2 column" style="background:url(<?= IMAGE_URL_SMALL.$value->profile_pic ?>);background-size:cover;">
						</div>
						<div class="userinfo medium-7 large-6 column">
							<a target="_blank" href="<?=BASE_URI?>profile?bhd=<?=$value->user_id?>"><?= $value->fname.' '.$value->lname ?></a>
							<p><small><?php 
											$work_experience = json_decode($value->work_experience);
											if($work_experience){
												echo $work_experience[0]->work_description;
											}
									  ?></small></p>
						</div>
						<div class="text-right btn-lst medium-1 large-2 columns">
							<a class="tiny radius button btnAccept" request_id = "<?= $value->id?>" >Accept</a>
						</div>
					</div>
				<?php } ?>
				</div>
		
				<div class="see-more text-right large-12 column">
					<a href="">View all</a>
				</div>
			</div>
			<?php } ?>

		</div>
</div>


<div id="newEvent" class="modalst reveal-modal medium" data-reveal data-options="closeOnBackgroundClick:false">
	<div class="row">
	  <div class="small-11 large-12 columns small-centered" style="padding:0;">
	    <div class="alert-panel" data-alert>
	      <div class="alert-panel-title">

	     <label><strong style="color:white;" onclick="alert('waw')">New Event</strong></label>
	      </div>

	      <div class="alert-panel-message medium-12 column">
	      <div class="medium-6 column" style="padding:0 .4rem 0 0;">
	      	    <div class="row collapse">
                    <div class="small-3 large-2 columns">
                      <span class="prefix" style="border:none;color:gray;">Title</span>
                    </div>
	                <div class="small-9 large-10 columns">
	                    <input  type="text" id="txtTitle" style="border:none;"/>
	                </div>
                </div>

	      		<label style="color:#009EA1"><strong>Event Description</strong></label>
	        	<textarea id="txtDescription" placeholder="Write the Event Description here" style="height:7rem;"></textarea>
		        <div class="row" style="padding:0;">
		            <div class="medium-12 column">
		                <label style="color:#009EA1"><strong>Date & Time of Event</strong></label>
		                <div class="medium-6 column">
		                	<input id="txtDate" type="date">	                	
		                </div>
		                <div class="medium-6 column">
		                	<input id="txtTime" type="time" name="usr_time">
		                </div>
	                </div>        	
		        </div>
	      </div>
	      <div class="medium-6 column" style="padding:0 0 0 .4rem;">
				<div class="row collapse">
					<div class="small-3 large-2 columns">
					<span class="prefix" style="border:none;color:gray;">Venue</span>
					</div>
					<!--Autocomplete Search box-->
					<div class="small-9 large-10 columns">
						<input id="txtVenue" type="text" placeholder="Enter your address" onclick="initialize(), cleartext();">
					</div>
					<!--Google Map-->
					<div id="map-canvas" class="large-12 column" style="background:gray;height:320px;"></div>
					<!--Results output-->
					<div class="hide large-4 columns" style="opacity: 0;">
						<input id="latlng" type="text" onfocus="codeLatLng();" onchange="codeLatLng();" size=60 readonly><br>
					</div>
					<div class="hide large-4 columns" style="opacity:0;">
						<input id="city" type="text" size=60 readonly><br>
					</div>
					<div class="hide large-4 columns" style="opacity:0;">
						<input id="string" type="text" size=60 readonly><br>
					</div>
				</div>           	      	
	      </div>

	      </div>
	      <div class="alert-panel-action">
	        <a class="tiny button radius secondary">Cancel</a>
	        <a id="btnCreateEvent" class="tiny button radius success">Create Event</a>
	      </div>
	    </div>
	  </div>
	</div>       
</div>
	<!-- JS to add -->
<script type="text/javascript">
  $(document).ready(function(){
	$("#myforumrate").jRating({
	  isDisabled : true,
	  length : 5, // nb of stars
	  decimalLength:1 // number of decimal in the rate
	});
  });
</script>

<script type="text/javascript">
	function createEvent(title,venue,description,date,group_id,longt,lat,city){
		var params = {};
		params.title = title;
		params.venue = venue;
		params.content = description;
		params.when = date;
		params.group_id = group_id;
		params.longt = longt;
		params.lat = lat;
		params.city = city;
		return $.ajax({
			url : URL + 'events/create',
			type: 'post',
			data: params,
			dataType: 'json'
		});
	}

	$('#btnCreateEvent').on('click',function(){

		var title = $('#txtTitle').val();
		var venue = $('#txtVenue').val();
		var description = $('#txtDescription').val();
		var date = $('#txtDate').val() + ' ' + $('#txtTime').val();
		var group_id = "<?= $_GET['ghd'] ?>";

		var latlng = document.getElementById("latlng").value;
    	var city = document.getElementById("city").value;
   		var longlat = latlng.split(',');
   		var lat = longlat[0];
   		var longt = longlat[1];

		createEvent(title,venue,description,date,group_id,longt,lat,city).done(function(result){			
			if(result.status){
				alert("Event Succesfully Created")
				$('#newEvent').foundation('reveal', 'close');
			}
		});
		return false;
	});
</script>

<script src="<?= BASE_URI ?>js/cbpFWTabs.js"></script>
<script>
	new CBPFWTabs( document.getElementById( 'tabs' ) );
</script>


<script type="text/javascript">
$(function(){
	function addRequest(group_id){
		var params = {};
		params.group_id = group_id;
		return $.ajax({
			url: URL + 'group/request',
			data: params,
			type: 'post',
			dataType: 'json'
		});
	}
	function acceptRequest(request_id){
		var params = {};
		params.request_id = request_id;
		return $.ajax({
			url: URL + 'group/accept',
			data: params,
			type: 'post',
			dataType: 'json'
		});
	}
	$(document).ready(function(){
		$('#btnJoinUs').click(function(){
			$('#btnJoinUs').html('Processing <img src="<?=BASE_URI?>img/loading.gif" />');
			var group_id = "<?= $_GET['ghd'] ?>";
			addRequest(group_id).done(function(result){
				if(result.status){
					$('#btnJoinUs').remove();
					window.location.reload();
				}
			});
		});

		$(document).on('click','.btnAccept',function(){
			var request_id = $(this).attr('request_id');
			var request = $(this);
			acceptRequest(request_id).done(function(result){
			 	if(result.status){
					request.parent().parent().remove();
				}
			});
			
		});	

	});
});	
</script>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script>

  var geocoder;
  var map;
  var autocomplete;
  var markers = [];

 function initialize() {
      document.getElementById("latlng").value="";
      document.getElementById("txtVenue").value="";
      document.getElementById("string").value="";
      document.getElementById("city").value="";
      // Create an array of styles.
      var styles = [
              {stylers: [{ hue: "#006652" },{ saturation: -20 }]},
              {featureType: "road", elementType: "geometry",stylers:[{ lightness: 30 },{ visibility: "simplified" }] },
              {featureType: "road",elementType: "labels"}
               ];
      var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
      var myLatlng = new google.maps.LatLng(14.586902, 120.98570599999994);
      var mapOptions = {zoom: 16,center: myLatlng,mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                       }};
      geocoder = new google.maps.Geocoder();
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');
      //Search Box location restriction       
      var input = document.getElementById('txtVenue');
      var options = {
        componentRestrictions: { country: 'ph' }
    };
    //Autocomplete function
      autocomplete = new google.maps.places.Autocomplete(input, options);
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        codeAddress(); 
    });
    }

function codeAddress(AddressToPoints) {
  var iconBase = 'behomebased-ph/Design/Final/Photos/Icon';
  var address = document.getElementById('txtVenue').value;
   geocoder.geocode( { 'address': address, 'componentRestrictions':{'country':'ph'}}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            icon: URL + 'img/icons/Marker.png',
            position: results[0].geometry.location,
            draggable:true,
        });

        markers.push(marker);

        var coordinates = marker.getPosition();
        coordinates1 = coordinates.toString();
        coordinates2 = coordinates1.substring(1, coordinates1.length-1);
        document.getElementById("latlng").value = coordinates2; 
        document.getElementById("latlng").focus();    
      
        google.maps.event.addListener(marker, 'dragend', function() {
        var coordinates = marker.getPosition();
        coordinates1 = coordinates.toString();
        coordinates2 = coordinates1.substring(1, coordinates1.length-1);
        document.getElementById("latlng").value = coordinates2;  
        document.getElementById("latlng").focus(); 
        map.setCenter(coordinates);   

        setTimeout(get, 230);

        function get(){
            document.getElementById('txtVenue').value = document.getElementById('string').value;
            }
          setTimeout(get, 230);
      });

      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }
  // Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setAllMap(null);
  }

function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

function codeLatLng(PointsToAddress) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    var latlng = new google.maps.LatLng(lat, lng);
    var string;
 
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {

          for (var j=0; j<results.length; j++)
          {

          for (var i=0; i<results[j].address_components.length; i++)
              {
                  if (results[j].address_components[i].types[0] == "locality") {
                          //this is the object you are looking for
                          city = results[j].address_components[i];
                      }
              }
            }

      string = (results[0].formatted_address);
      document.getElementById("string").value = string;
      document.getElementById("city").value =  city.long_name;

      var city_name = city.long_name;
      var length = city_name.length;

      if (city_name.substr(-4, 4) == "City")
          {
            document.getElementById("city").value = city_name.substr(0, length-5);
          }

          else if (city_name.substr(0,7) == "City of")
            {
            document.getElementById("city").value = city_name.substr(8,length);
            }
            
             else { 
             }

          } 
          else {
            alert('No results found');
          }
        
      } 
      else {
      }
    });
  }

function cleartext(){
    document.getElementById("txtVenue").value="";
    document.getElementById("latlng").value="";
    document.getElementById("string").value="";
    document.getElementById("city").value="";
    deleteMarkers();
  }
  
google.maps.event.addDomListener(window, 'load', initialize);

</script>

<style>
h1 {
color:#fff; text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000; 
}

</style>
